mpris: Make forward/backward insensitive when unavailable

Media notifications currently always show the forward and backward
buttons as clickable, regardless of whether the corresponding action
is available or not. Media players usually address this by rendering
controls insensitive in this case, so do the same here.

https://bugzilla.gnome.org/show_bug.cgi?id=773884

diff --git a/data/theme/gnome-shell-high-contrast.css b/data/theme/gnome-shell-high-contrast.css
index 6a3f875941195d5b948b3e4c08f2c64327cb80db..b46a695c83990a12ffe8631b7d3eafb9ed5c6b8b 100644 (file)
--- a/data/theme/gnome-shell-high-contrast.css
+++ b/data/theme/gnome-shell-high-contrast.css
@@ -912,6 +912,8 @@ StScrollBar {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
+  .message-media-control:insensitive {
+    color: #999999; }
 
 .media-message-cover-icon {
   icon-size: 48px !important; }

diff --git a/data/theme/gnome-shell-sass b/data/theme/gnome-shell-sass
index a172894788ec73c82be9aa6d29243809fdb0111d..671023a8b333f027d8c88fca9963b11581c10a70 160000 (submodule)
--- a/data/theme/gnome-shell-sass
+++ b/data/theme/gnome-shell-sass
@@ -1 +1 @@
-Subproject commit a172894788ec73c82be9aa6d29243809fdb0111d
+Subproject commit 671023a8b333f027d8c88fca9963b11581c10a70

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 58a76566ddb0fd2e72fd85d78ecc46110406f0cb..5f2d39ff47acac6fdf187d73949def3da39c52d7 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -912,6 +912,8 @@ StScrollBar {
     padding-right: 18px; }
   .message-media-control:last-child:rtl {
     padding-left: 18px; }
+  .message-media-control:insensitive {
+    color: #8e8e80; }
 
 .media-message-cover-icon {
   icon-size: 48px !important; }

diff --git a/js/ui/mpris.js b/js/ui/mpris.js
index b42d9aa57e00d5a6f3c2e18e5635c348713fe285..a5ca66f4d827fd290d8a0a86954e31ebea06431c 100644 (file)
--- a/js/ui/mpris.js
+++ b/js/ui/mpris.js
@@ -36,6 +36,8 @@ const MprisPlayerIface = '<node> \
   <method name="PlayPause" /> \
   <method name="Next" /> \
   <method name="Previous" /> \
+  <property name="CanGoNext" type="b" access="read" /> \
+  <property name="CanGoPrevious" type="b" access="read" /> \
   <property name="CanPlay" type="b" access="read" /> \
   <property name="Metadata" type="a{sv}" access="read" /> \
   <property name="PlaybackStatus" type="s" access="read" /> \
@@ -57,7 +59,7 @@ const MediaMessage = new Lang.Class({
         this._icon = new St.Icon({ style_class: 'media-message-cover-icon' });
         this.setIcon(this._icon);
 
-        this.addMediaControl('media-skip-backward-symbolic',
+        this._prevButton = this.addMediaControl('media-skip-backward-symbolic',
             Lang.bind(this, function() {
                 this._player.previous();
             }));
@@ -67,7 +69,7 @@ const MediaMessage = new Lang.Class({
                 this._player.playPause();
             }));
 
-        this.addMediaControl('media-skip-forward-symbolic',
+        this._nextButton = this.addMediaControl('media-skip-forward-symbolic',
             Lang.bind(this, function() {
                 this._player.next();
             }));
@@ -82,6 +84,10 @@ const MediaMessage = new Lang.Class({
         Main.panel.closeCalendar();
     },
 
+    _updateNavButton: function(button, sensitive) {
+        button.reactive = sensitive;
+    },
+
     _update: function() {
         this.setTitle(this._player.trackArtists.join(', '));
         this.setBody(this._player.trackTitle);
@@ -99,6 +105,9 @@ const MediaMessage = new Lang.Class({
         let iconName = isPlaying ? 'media-playback-pause-symbolic'
                                  : 'media-playback-start-symbolic';
         this._playPauseButton.child.icon_name = iconName;
+
+        this._updateNavButton(this._prevButton, this._player.canGoPrevious);
+        this._updateNavButton(this._nextButton, this._player.canGoNext);
     }
 });
 
@@ -139,10 +148,18 @@ const MprisPlayer = new Lang.Class({
         this._playerProxy.PlayPauseRemote();
     },
 
+    get canGoNext() {
+        return this._playerProxy.CanGoNext;
+    },
+
     next: function() {
         this._playerProxy.NextRemote();
     },
 
+    get canGoPrevious() {
+        return this._playerProxy.CanGoPrevious;
+    },
+
     previous: function() {
         this._playerProxy.PreviousRemote();
     },